<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>milkbox变量起名器</title>

    <!--本地版-->
    <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
    <script src="plugins/vue_2.6.14/vue.js"></script>
    <script src="plugins/elementUI_2.15.7/index.js"></script>
    <script src="plugins/axios/axios_0_27_2.min.js"></script>
    <script src="plugins/jquery/jquery-3.3.1.min.js"></script>
    <!-- 动画框架 -->
    <link rel="stylesheet" href="plugins/animate_4.1.1/animate.min.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/common/common.css">

    <!-- 引入头部 -->
    <script src="js/common/header.js"></script>
    <link rel="stylesheet" href="css/common/header.css">

    <!-- 接口地址全局变量 -->
    <script src="/js/common/jieKouAddress.js"></script>
    <!-- 全局函数 -->
    <script src="/js/common/commonMethod.js"></script>

    <!-- 当前页主样式 -->
    <link rel="stylesheet" href="css/variableNamer.css" />
</head>

<body>

    <div id="app">
        <!-- 公共头部 -->
        <header id="headerContent"></header>
        <div class="x-box">
            <div class="content milkbox-shadow-button-right" :class="{'milkbox-disabled': isSourceChanging}">
                <div class="title">变量名起名器</div>
                <div class="milkbox-readme">
                    <h4>使用方式</h4>
                    <ol>
                        <li>在输入框中输入中文描述</li>
                        <li>点击确定按钮</li>
                        <li>然后就可以看到对应的变量名了</li>
                    </ol>
                    <p style="line-height: 30px;">
                        例如：输入<span class="milkbox-code-line pointer milkbox-code-line-dynamic">验证码控制器</span>可以得到大写驼峰
                        <span
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">VerificationCodeController</span>
                    </p>
                </div>
                <el-form :model="sourceFromData" :rules="sourceFromRules" ref="sourceForm" label-width="0px"
                    class="source-from">
                    <el-form-item label="" prop="source">
                        <el-input class="translation-source" type="text" placeholder="请输入描述"
                            v-model="sourceFromData.source" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="milkbox-confirm-cancel-buttons">
                    <div class="option-button" @click="sendSource('sourceForm')">确定</div>
                    <div class="option-button option-button-danger" @click="resetForm('sourceForm')">清除
                    </div>
                </div>
                <div class="translation-result">
                    <div class="variable-list x-box">
                        <div class="y-box">{{humpFirstUpperTips}}</div>
                        <div @mouseover="humpFirstUpperTips = '！！点击复制'" @mouseout="humpFirstUpperTips = '大写驼峰：：'"
                            @click="copy(allVariable.humpFirstUpper)"
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">
                            {{allVariable.humpFirstUpper}}
                        </div>
                    </div>
                    <div class="variable-list x-box">
                        <div class="y-box">{{humpFirstLowerTips}}</div>
                        <div @mouseover="humpFirstLowerTips = '！！点击复制'" @mouseout="humpFirstLowerTips = '小写驼峰：：'"
                            @click="copy(allVariable.humpFirstLower)"
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">
                            {{allVariable.humpFirstLower}}</div>
                    </div>
                    <div class="variable-list x-box">
                        <div class="y-box">{{underLineTips}}</div>
                        <div @mouseover="underLineTips = '！！点击复制'" @mouseout="underLineTips = '下划线式：：'"
                            @click="copy(allVariable.underLine)"
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">
                            {{allVariable.underLine}}</div>
                    </div>
                    <div class="variable-list x-box">
                        <div class="y-box">{{barbecueTips}}</div>
                        <div @mouseover="barbecueTips = '！！点击复制'" @mouseout="barbecueTips = '中划线式：：'"
                            @click="copy(allVariable.barbecue)"
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">
                            {{allVariable.barbecue}}</div>
                    </div>
                    <div class="variable-list x-box">
                        <div class="y-box">{{constantTips}}</div>
                        <div @mouseover="constantTips = '！！点击复制'" @mouseout="constantTips = '常量格式：：'"
                            @click="copy(allVariable.constant)"
                            class="milkbox-code-line pointer milkbox-code-line-dynamic">
                            {{allVariable.constant}}</div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 公共尾部 -->
        <!-- <footer id="footerContent"></footer> -->
    </div>
    <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
    <script src="js/variableNamer.js"></script>
    <!-- 自己对动画框架的封装 -->
    <script src="js/common/commonAnimation.js"></script>
</body>

</html>